<template>
  <div class="zuida">
    <Back></Back>
    <!-- <form action="" method="post"> -->
      <div class="text">发表文章</div>
    <div class="kuang">
      <input type="text" class="top" placeholder="标题" v-model="title">
      <br>
      <textarea name="" id="" cols="30" rows="10" v-model="content" placeholder="文章内容仅支持纯文本，如文章包含多个段落，此处使用换行的方法是无效的，使用p标记包围段落文字方可有效。"></textarea>
      <!-- <input type="file"> -->
      <tupian @tupian="getimg"></tupian>
    </div>
    <!-- <div class="fabu">发布</div> -->
    <!-- <input type="submit" value="发布" class="fabu" > -->
    <button class="fabu" @click="fabu" :plain='true'>发布</button>
    <!-- </form> -->
    
  </div>
</template>
<script>
import tupian from './zujian/tupian.vue'
import Back from './zujian/back.vue'
export default {
  data(){
    return{
      title:'',
      content:'',
      img:[],
      user:'',
      tou:'',
      idd:'',
      date:''
    }
  },
  methods:{
    fabu(){
      if(this.title!==''&&this.content!==''){
        const riqi=new Date()
      this.date=riqi.getUTCMonth()+1+'/'+riqi.getUTCDate()+' '+riqi.getHours()+":"+riqi.getMinutes();
      this.axios.post("/tijiaowen",{
        title:this.title,
        content:this.content,
        img:'['+this.img+']',
        user:this.user,
        tou:this.tou,
        date:this.date,
        pinglun:0,
        liulan:0,
        idd:this.idd
      }).then((res)=>{
       
        this.$router.push('/fatie')
      })
      }
      else{
        this.$message({
          message:'标题或内容区域不可为空!',
          type:'warning'
        });
      }
      
      
    },
    getimg(val){
      console.log(val);
      this.img=val
    }
  },
  created(){

    
    // this.date=
    
    this.idd=JSON.parse(sessionStorage.getItem('user')).id
    // console.log(this.idd);
    // this.user=sessionStorage.getItem('')
    var user=JSON.parse(sessionStorage.getItem("user"))
    this.axios.get('/wode/'+user.id).then((res)=>{
      // console.log(res);
      this.tou=res.data[0].tou
    })
    this.user=user.use
      this.$store.commit('bian')
    },
    components:{
      tupian,Back
    }
}
</script>
<style lang="less" scoped>
  .zuida{
    border-radius: 20px;
    box-shadow: 1px 1px 10px rgba(0, 255, 51, 0.853);
    padding-top: 50px;
    width: 50%;
    // height: 800px;
    background-color: #99D9A7;
    margin: 0 auto;
    padding-bottom: 100px;
  }
  .text{
    margin-left: 110px;
    // margin-top: 100px;
    width: 100%;
    height: 60px;
    font-size: 30px;
  }
  .kuang{
    width: 87%;
    margin:  0 auto;
    // background-color: blue;
  }
  .top{
    border: 1px solid rgb(60, 58, 58);
    width: 100%;
    margin: 0 auto;
    height: 30px;
    font-size: 20px;
    background-color: #89c697;
  }
  .top:focus{
    outline: 1px solid transparent;
  }
  textarea{
    width: 100%;
    height: 400px;
    resize:none;
    font-size: 16px;
    background-color: #97c48182;
  }
  textarea:focus{
    outline: 1px solid transparent;
  }
  .fabu{
    
    width: 10%;
    margin: 0 auto;
    height: 60px;
    background-color: #f6f8f57d;
    line-height: 60px;
    font-size: 30px;
    text-align: center;
    border-radius: 6px;
    margin-left: 390px;
    margin-top: 20px;
    // margin-right: 68px;
    border: 0px solid transparent;
    // margin-top: 100px;
  }
  
</style>